import React from "react";
import { withRouter } from "react-router-dom";
import { Layout, Menu, Breadcrumb, Dropdown, Icon, Avatar, message } from "antd";
import {
    UserOutlined,
    LaptopOutlined,
    NotificationOutlined,
    AreaChartOutlined,
} from "@ant-design/icons";
import logo from "./logo192.png";
import "./frame.css";

import { adminRoutes } from "../../routes";
import { clearToken } from "../../utils/auth";

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

const routes = adminRoutes.filter((route) => route.isShow);

function Index(props) {
    const popMenu = (
        <Menu
            onClick={(p) => {
                if (p.key == "logOut") {
                    clearToken();
                    props.history.push("/login");
                } else {
                    message.info(p.key); //tip
                }
            }}
        >
            <Menu.Item key="noti">通知中心</Menu.Item>
            <Menu.Item key="setting">设置</Menu.Item>
            <Menu.Item key="logOut">退出</Menu.Item>
        </Menu>
    );

    return (
        <Layout>
            <Header className="header" style={{ backgroundColor: "#428bca" }}>
                <div className="logo">
                    <img style={{ width: "64px" }} src={logo} alt="logo" />
                </div>
                <Dropdown overlay={popMenu}>
                    <div>
                        <Avatar>U</Avatar>
                        <span style={{ color: "red" }}>超级管理员</span>
                        <Icon type="down"></Icon>
                    </div>
                </Dropdown>
            </Header>
            <Layout>
                <Sider width={200} className="site-layout-background">
                    <Menu
                        mode="inline"
                        defaultSelectedKeys={["1"]}
                        defaultOpenKeys={["sub1"]}
                        style={{ height: "100%", borderRight: 0 }}
                    >
                        {routes.map((route) => {
                            return (
                                <Menu.Item
                                    key={route.path}
                                    onClick={(p) => props.history.push(p.key)}
                                    icon={<AreaChartOutlined />}
                                >
                                    {route.title}
                                </Menu.Item>
                            );
                        })}
                    </Menu>
                </Sider>
                <Layout style={{ padding: "16px" }}>
                    {/* <Breadcrumb style={{ margin: "16px 0" }}>
                        <Breadcrumb.Item>Home</Breadcrumb.Item>
                        <Breadcrumb.Item>List</Breadcrumb.Item>
                        <Breadcrumb.Item>App</Breadcrumb.Item>
                    </Breadcrumb> */}
                    <Content
                        className="site-layout-background"
                        style={{
                            padding: 24,
                            margin: 0,
                            minHeight: 280,
                        }}
                    >
                        {props.children}
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    );
}

export default withRouter(Index);
